<template>
    <div class="main">

        <el-row :gutter="24">
            <el-col :span="24">
                <el-card>
                    <h1>学习累计</h1>
                </el-card>
            </el-col>

            <el-col :span="10" :offset="6">
                <el-input v-model="currentTask.thingName" placeholder="请输入事件名称"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button round type="primary" @click="confirm" ref="confirmBt">确定</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="24" class="time">
            {{ showTime }}
        </el-row>

        <el-row :gutter="24">
            <el-col :span="4" :offset="8" v-if="startFlag">
                <el-button type="primary" @click="pause()">暂停</el-button>
            </el-col>
            <el-col :span="4" :offset="8" v-else>
                <el-button type="primary" @click="start()">{{ showText }}</el-button>
            </el-col>

            <el-col :span="2">
                <el-button type="primary" @click="stop()">结束</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="24" class="table-container">
            <el-col :offset="2" :span="20">
                <el-table
                    :data="things"
                    class="table-things"
                    :border=true
                    stripe
                    :key="tableKey"
                    >
                    <el-table-column
                        header-align="center"
                        align="center"
                        label="名称"
                        prop="thingName"
                        />
                    <el-table-column
                        header-align="center"
                        align="center"
                        label="累计时间"
                        prop="time"
                        />
                    <el-table-column
                        header-align="center"
                        align="center"
                        label="操作"
                        >
                        <template slot-scope="scope">
                            <el-button type="primary" round @click="choose(scope.row, scope.$index)">选择</el-button>
                            <el-button type="danger" round @click="deleteThing(scope.row, scope.$index)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

    </div>
</template>

<script>

import axios from "axios";

export default {

    name: "Concentrate",
    data: function () {
        return {
            // taskName: "",
            // time: 0,
            currentTask: {
                "thingName": "",
                time: 0,
                uuid: 1
            },
            timeText: "00:00:00",
            startFlag: false,
            t: "",
            things: [
                {"thingName": "测试", "time": 1}
            ],
            tableKey: 0,

        }
    },
    methods: {
        confirm() {
            let that = this;
            // this.$refs.confirmBt.disabled = true;
            this.addThing()
        },
        start() {
            let that = this;
            // console.log("start")
            if (that.startFlag) {
                return;
            }
            if (this.currentTask.thingName !== "") {
                that.startFlag = true;
                that.t = setInterval(function () {
                    // console.log(that.startFlag)
                    if (!that.startFlag) {
                        clearInterval(that.t);
                    } else {
                        that.currentTask.time = that.currentTask.time + 1;
                        that.addTime()

                    }

                }, 990);
            } else {
                that.$message.error("请先输入任务")
            }

        },
        pause() {
            let that = this;
            that.startFlag = false;
        },
        stop() {

        },
        choose(row, index) {
            console.log(row)
            console.log(index)
            this.currentTask = row;
        },
        deleteThing(row, index) {
            console.log(row)
            console.log(index)
            let that = this;
            that.$confirm("确定删除:" + row.thingName + "?", "警告", {
                cancelButtonText: "取消",
                confirmButtonText: "确定",
                type: "warning"
            }).then(() => {
                that.deleteThingById(row.uuid, row.thingName)
            })
        },
        formatTime(dat) {
            let hour = dat.getHours() < 10 ? "0" + (dat.getHours()) : dat.getHours();
            let min = dat.getMinutes() < 10 ? "0" + (dat.getMinutes()) : dat.getMinutes();
            let sec = dat.getSeconds() < 10 ? "0" + (dat.getSeconds()) : dat.getSeconds();
            return hour + ":" + min + ":" + sec;
        },
        getThingList() {
            let url = "/thing/findAll"
            let that = this;
            axios.create().post(url).then(res => {
                console.log(res.data)
                that.things = res.data.data;
                that.tableKey++;
            })
        },
        addTime() {
            let url = "/thing/addTime"
            let that = this;
            let param = new FormData()
            param.set("taskId", that.currentTask.uuid)
            axios.create().post(url, param).then(res => {
                console.log(res.data.code)
            })
        },
        addThing() {
            let url = "/thing/addThing"
            let that = this;
            let param = new FormData()
            param.set("name", that.currentTask.thingName)
            axios.create().post(url, param).then(res => {
                if (res.data.code == 0) {
                    that.$message.success("添加成功")
                    that.currentTask = {"time": 0}
                    that.getThingList()
                } else {
                    that.$message.error("添加失败")
                }
            })
        },
        deleteThingById(taskId, taskName) {
            let url = "thing/deleteThing"
            let param = new FormData();
            let that = this;
            param.set("taskId", taskId);
            axios.create().post(url, param).then(res => {
                if (res.data.code == 0) {
                    that.$message.success(taskName + "删除成功");
                    that.currentTask = {"time": 0}
                    that.getThingList();
                } else {
                    that.$message.error(taskName + "删除失败");
                }
            })
        }


    },
    computed: {
        showTime() {
            let that = this
            let tt = this.currentTask.time
            console.log(tt)
            let time = new Date(tt * 1000 - 8 * 60 * 60 * 1000);
            that.timeText = this.formatTime(time);
            return this.formatTime(time)

        },
        showText() {
            if (this.currentTask.time == 0) {
                return "开始";
            } else {
                return "继续";
            }
        }
    },
    mounted() {
        this.getThingList();
    }

}
</script>

<style scoped>
.main {
    text-align-all: center !important;
    text-align: center !important;
    align-items: center !important;
}

.time {
    font-size: 100px;
}

.table-container {

    height: auto;
    padding: 0px!important;
    text-align: center;
    text-align-all: center;
    align-items: center;
}

.table-things {
    align-items: center;
    text-align: center;
    width: available;
}


</style>